<template>
    <div>
        <el-container>
            <!--顶部-->
                <el-header>              
                    <!--<div  class="header" >
                        <el-row>
                            <el-col :span=4 class="headerCol">
                                <el-image :src="require('../../../img/littleIcon/doctorLogo.png')"></el-image>
                            </el-col>
                        </el-row>                  
                    </div>-->
                    <head-1></head-1>
                </el-header>
                <el-divider></el-divider>
                <el-main>
                    <el-row>
                        <el-col :span=24>
                            <h1>体检报告单</h1>
                        </el-col>
                    </el-row>
                    <div class="el-colDiv">
                    <el-row>
                        <el-col :span=6>
                            <span>姓名：{{member.name}}</span>
                        </el-col>
                        <el-col :span=6>
                            <span v-if="member.sex==1">性别：男</span>
                            <span v-if="member.sex==2">性别：女</span>
                        </el-col>
                        <el-col :span=6>
                            <span>年龄：{{member.age}}</span>
                        </el-col>
                    </el-row><br>
                    <el-row>
                        <el-col :span=6>
                            <span>主治医生：{{this.member.healthName}}</span>
                        </el-col>
                        <el-col :span=6>
                            <span>体检类型：{{this.member.tSetmeal.name}}</span>
                        </el-col>
                        <el-col :span=8>
                            <span>体检时间：{{this.member.tOrder.orderdate | dateFormat}}</span>
                        </el-col>
                    </el-row>
                    </div>
                    <div class="el-tableDiv">
                        <el-table :data="reportList" stripe style="100%">
                            <el-table-column prop='code' width="auto" label="项目编号"></el-table-column>
                            <el-table-column prop='name' width="auto" label="项目名称"></el-table-column>
                            <el-table-column prop='tBodyCk.jg' width="auto" label="结果">
                                <template slot-scope="scope">                                   
                                    <label  v-if="scope.row.minck<scope.row.tBodyCk.jg&&scope.row.tBodyCk.jg<scope.row.maxck" style="color:green">
                                            {{scope.row.tBodyCk.jg}}
                                            <el-image :src="require('../../../img/report/rigth.png')"></el-image>
                                    </label>
                                    <label v-else style="color:red">
                                            {{scope.row.tBodyCk.jg}}
                                    </label>
                                </template>
                            </el-table-column>
                            <el-table-column width="auto" label="参考值">
                                <template slot-scope="scope">
                                    <label>{{scope.row.minck}}~{{scope.row.maxck}}</label>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-main>
                <el-footer>
                    <label style="color:red">注意：结果为绿色，表示正常，结果为红色，表示不正常，请及时就医</label>
                </el-footer>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
import Head1 from '../../../components/home/Head1.vue'
export default 
  {
    data() {
        return {
            reportList:{
                tBodyCk:{},
                tMember:{}
            },
            member:{}
        }
    },
    components: { Head1 },
    methods:{
        reportListInit(){
            axios.get("/checkItem/queryCheckItemAll")
            .then(res => {
                this.reportList=res.data
            })
            .catch(err => {
                console.error(err); 
            })
        },
        memberInit(){
            axios.get("/member/queryReprotByMemberId")
            .then(res => {
                if(res.data==null || res.data == ''){
                    this.$router.push("/ko")
                }else{
                    this.member=res.data
                    console.log(this.member)
                }
            })
            .catch(err => {
                this.$router.push("/ko")
                console.error(err); 
            })
        }
    },
    filters:{
        dateFormat:function(date){
            var dt = new Date(date);
            var year = dt.getFullYear();
            var month = (dt.getMonth()+1).toString().padStart(2,'0')//补零操作
            var dat = (dt.getDate()).toString().padStart(2,'0')
            var hours = dt.getHours().toString().padStart(2,'0')
            var minutes = dt.getMinutes().toString().padStart(2,'0')
            var seconds = dt.getSeconds().toString().padStart(2,'0')
            return year+"-"+month+"-"+dat+" "+hours+":"+minutes+":"+seconds
        }
    },
    created(){
        this.memberInit()
        this.reportListInit()
    },
}
</script>

<style scoped>
    .headerCol{
        margin-top: 10px;
        text-align: left;
    }    
    span{
        text-align: left;
        font-size: 20px;
    }
    .el-tableDiv{
        border: 1px solid gray;
        width: 80%;
        margin: 0 auto;
    }
    .el-colDiv{
        height: 100px;
        border: 1px solid gray;
        padding-top: 20px;
        padding-left: 100px;
        text-align: left;
        width: 73%;
        margin: 0 auto;
        margin-bottom: 20px;
    }
</style>